<template>
	<view>
		<scroll-view enable-back-to-top scroll-y class="viewport">
			<!-- 收货地址 -->

			<view class="" @tap="openPopup">
				<view v-if="is_address" class="shipment">
					<view class="user"> {{ address.address_name }} {{ address.phone }} </view>
					<view class="address">{{ address.address_txt }} </view>
					<text class="icon icon-right"></text>
				</view>
				<view v-else class="shipment">
					<view class="address"> 请选择收货地址 </view>
					<text class="icon icon-right"></text>
				</view>
			</view>
			<!-- 商品信息 -->
			<view class="goods">
				<navigator v-for="item in order" :key="item.goodsId" :url="`/pages/goods/goods?id=${item.goodsId}`" class="item"
					hover-class="none">
					<image class="picture" :src="item.goodsImage" />
					<view class="meta">
						<view class="name ellipsis"> {{ item.goodsName }} </view>
						<view class="attrs">{{ item.goodsArticle }}</view>
						<view class="prices">
							<view class="pay-price symbol">{{ item.goodsPrice }}</view>
						</view>
						<view class="count">×{{ item.goodsCount }}</view>
					</view>
				</navigator>
			</view>

			<!-- 配送及支付方式 -->
			<view class="related">
				<view class="item">
					<text class="text">配送时间</text>
					<picker :range="deliveryList" range-key="text" @change="onChangeDelivery">
						<view class="icon-fonts picker">{{delivery}}</view>
					</picker>
				</view>
				<view class="item">
					<text class="text">订单备注</text>
					<input class="input" :cursor-spacing="30" placeholder="选题，建议留言前先与商家沟通确认" v-model="buyerMessage" />
				</view>
			</view>

			<!-- 支付金额 -->
			<view class="settlement">
				<view class="item">
					<text class="text">商品总价: </text>
					<text class="number symbol">{{get_total_money}}</text>
				</view>
				<view class="item">
					<text class="text">运费: </text>
					<text class="number symbol">{{0}}</text>
				</view>
			</view>

			<!-- 吸底工具栏 -->
			<view class="toolbar">
				<view class="total-pay symbol">
					<text class="number">{{get_total_money}}</text>
				</view>
				<view class="button" @tap="onOrderSubmit">
					提交订单
				</view>
			</view>
			<!-- uni-ui 弹出层 -->
			<uni-popup ref="popup" type="bottom" background-color="#fff">
				<AddressPanel @choose_address="change_address" />
			</uni-popup>
		</scroll-view>

	</view>
</template>

<script>
	import store from '@/store/index.js'
	import {
		mapState,
		mapMutations,
		mapActions,
		mapGetters
	} from 'vuex'
	import AddressPanel from '../components/AddressPanel.vue'
	export default {
		components: {
			AddressPanel
		},
		onLoad(option) {
			this.order = JSON.parse(option.order)
			// console.log(option)
			this.address = this.get_address_default
		},
		data() {
			return {
				address: {},
				order: [],
				buyerMessage: '',
				deliveryList: [{
						type: 1,
						text: '时间不限 (周一至周日)'
					},
					{
						type: 2,
						text: '工作日送 (周一至周五)'
					},
					{
						type: 3,
						text: '周末配送 (周六至周日)'
					},
				],
				// 当前配送时间
				delivery: '时间不限 (周一至周日)',
			}
		},
		methods: {
			// 提交订单
			onOrderSubmit() {
				let content = {
					order: this.order,
					address: this.address
				}
				uni.navigateTo({
					url: `/pages/mall/submit_order/pay_order/pay_order?content=${JSON.stringify(content)}`
				})
			},
			//弹出地址栏
			openPopup() {
				this.$refs.popup.open()
			},
			//选择地址
			change_address(id) {
				this.address = this.addressList.find((item) => item.address_id == id)
				this.$refs.popup.close()
			},
			// 修改配送时间
			onChangeDelivery(e) {
				console.log(e)
				this.delivery = this.deliveryList[e.detail.value].text
			}
		},
		computed: {
			...mapGetters('user', ['get_address_default']),
			...mapState('user', ['user', 'addressList']),
			get_total_money() {
				return this.order.reduce((sum, item) => sum + item.goodsPrice * item.goodsCount, 0);
			},
			is_address() {
				return Object.keys(this.address).length ? true : false
			}
		}
	}
</script>

<style lang="scss">
	@import "../styles/submit_order.scss";
</style>